<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>客户端1</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .mt_20 {
            margin-top: 20px;
        }

        .one .panel-body {
            padding: 0;
        }

        .panel-body textarea {
            border: none;
            outline: none;
            font-size: 16px;
            width: 100%;
            height: 400px;
            padding: 20px;
        }
    </style>
</head>

<body>

    <div class="container mt_20">
        <div class="panel panel-default one">
            <div class="panel-heading">消息内容框</div>
            <div class="panel-body">
                <textarea id="content"></textarea>
            </div>
        </div>


        <div class="panel panel-default two">
            <div class="panel-heading">发送框</div>
            <div class="panel-body">
                <input id="sendMsg" class="form-control inline" style="display: inline;" type="text" />
                <button id="btn_send" class="btn btn-success mt_20">发送</button>
            </div>
        </div>
    </div>



    <br/>


    <!-- 首先引入 socket.io 客户端脚本-->
    <!-- <script src="/socket.io/socket.io.js"></script> -->
    <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
    <script type="text/javascript">
        var socket = io.connect('http://47.103.36.143:8889/');  //连接服务端，因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
        // 监听 receiveMsg 事件，用来接收其他客户端推送的消息
        socket.on("receiveMsg", function (data) {
            content.value += data.client + ":" + data.msg + "\r\n";
        });
        var content = document.getElementById("content");
        var sendMsg = document.getElementById("sendMsg");
        var btn_send = document.getElementById("btn_send");


        btn_send.addEventListener("click", function () {
            var data = {
                client: "天巧星-燕青",
                msg: sendMsg.value
            };
            //给服务端发送 sendMsg事件名的消息
            socket.emit("sendMsg", data);
            // content.value += data.client + ":" + data.msg + "\r\n";
            // sendMsg.value = "";
        });
    </script>

</body>

</html>